import React from 'react';
import moment from 'moment';
import { Grid, Row, Col/*, Glyphicon*/ } from 'react-bootstrap';
import DatePicker from '../../components/date/react-datepicker';
import CalendarTable from '../../components/date/CalendarTable';
// import './hammer2-1.png';

// import BigDatePicker from '../../components/date/BigDatePicker';
function getColor(status) {
  const color = {
    ok: 'ok',
    warn: 'warn',
    error: 'error',
  };
  return status && color[status] ? color[status] : 'diabled';
}
function getDate(date) {
  return date ? moment(date, 'YYYYMMDD').format('YYYYMMDD') : '';
}
function handleTd(dayData) {
  const { date, detail } = dayData;
  let icons;
  if (detail && detail.list && detail.list.length) {
    icons = detail.list.map(e => (
      <span key={e.name} className={`calendar-day-data calendar-icon-${getColor(e.status)}`}>
        {/*<Glyphicon glyph={e.icon} title={e.name} />*/}
        <span className={`icon icon-${e.icon}`} />
      </span>
    ));
  }
  const currDay = getDate(date);
  const dayOfMonth = currDay.replace(/^\d{6}0?/, '');
  const checkStyle = detail && detail.state ? 'calendar-day-checked' : '';
  const todayStyle = currDay === getDate(moment()) ? 'calendar-today' : '';
  // const thisMonthStyle = detail && !detail.isThisMonth ? 'calendar-other-month' : '';
  // eslint-disable-next-line consistent-return
  return (
    <div className={`clearfix ${checkStyle}`}>
      <div className={`calendar-day-custom ${todayStyle}`}>{dayOfMonth}</div>
      <div key={date}>{icons}</div>
    </div>
  );
}

function formatDayData(currDate) {
  const now = moment(currDate);
  const result = {};
  for (let i = 1; i <= 31; i += 1) {
    const day = i < 10 ? `0${i}` : i;
    result[`${now.format('YYYYMM')}${day}`] = {
      state: [true, false][Number.parseInt(Math.random() * 2, 10)],
      list: [{
        name: '数据量对账',
        icon: 'database',
        status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
      }, {
        name: '业务量对账',
        icon: 'stats-bars',
        status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
      }, {
        name: '服务',
        icon: 'server',
        status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
      }, {
        name: '数据校验',
        icon: 'hammer2',
        status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
      }],
    };
  }
  return result;
}

export default class DataBalance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currTime: moment(),
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      currTime: date,
    });
  }

  render() {
    return (
      <Grid>
        <Row className="show-grid">
          <Col xs={12} sm={10} md={8} lg={6}>
            <DatePicker
              selected={this.state.currTime}
              onChange={this.handleChange}
              dropdownMode="scroll"
              showMonthDropdown
              useShortMonthInDropdown
            />
            {
              /*<BigDatePicker
                  inline
                  selected={this.state.currTime}
                  onChange={this.handleChange}
                  formatDayData={formatDayData()}
                />*/
            }
          </Col>
        </Row>
        <Row>
          <Col xs={12}>
            <CalendarTable
              currDate={this.state.currTime}
              customTd
              data={formatDayData(this.state.currTime)}
              handleTd={(date, detail) => handleTd(date, detail)}
            />
          </Col>
        </Row>
      </Grid>
    );
  }
}
